<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
	
    #app1{
        display: flex;
     
      justify-content: center;
      width: 100%;
      flex-wrap: wrap;
    }
    *{
        margin: 0 auto;
        padding: 0;
    }
    #majorBkock{ 
        height: 400px;
        width: 500px;
      
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
   
    }
    #head { 
     
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    
    }
    #tail{
        width: 250px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .xiao{
        width: 30px;
        height: 20px;
    }
    .j{
        width: 20px;
        height: 20px;
    }
</style>
<body id="app">
    <!-- ### 作业：构建vue项目,写一个商品的列表，里面图片链接等，可以用vue里面的data的数据    -->
	<!-- 作业：在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示 -->
	

	<div id="app1">
       
			<div id="majorBkock" v-for="(object,index) in object" >
		
			<div id="head">
			
            <img :src="object.img" >
            <span >{{object.name}}</span>
            <span>买贵必赔|12期免息 商品数量：{{object.total}}</span>
        </div>
        <div id="tail">
            
          
        </div>
        <div>
            <span >￥{{object.money}}</span>
          <button class="j" @click="jian(index)" >-</button>
        <input type="text" readonly  v-model=object.buy class="xiao" >
        <button class="j" @click="jia(index)" >+</button> 
         <button @click="scdx(index)">立即购买</button> 
        </div>
	
		<div>
		<input :id="object.id" type="button" value="新增" @click="zen(index)">
		<input type="button" value="删除" @click="shang(index)">
		</div>
		
    </div>
	</div>

	

    <div>
       <span > 购买金额:{{goumai}}</span>
    </div>


</body>
<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js">

</script>
<script>
 let app= Vue.createApp({
    data:function () {
        return{
            goumai:0,
            object :[
                {
					id:1,
                    name:"AMLRO柔光射频美容仪Pro",
                    img:'https://img10.360buyimg.com/seckillcms/s250x250_jfs/t20260319/109931/11/38074/25304/6418083eFe4de4ceb/1d82138ac6fb8f2d.jpg',
                    money:499,
					total:500,
					buy:0,
                },
                {
					id:2,
                    name:"AMLRO柔光射频美容仪Pro",
                    img:'https://img10.360buyimg.com/seckillcms/s250x250_jfs/t20260319/109931/11/38074/25304/6418083eFe4de4ceb/1d82138ac6fb8f2d.jpg',
                    money:399,
					total:100,
					buy:0,
                },
                {
					id:3,
                    name:"AMLRO柔光射频美容仪Pro",
                    img:'https://img10.360buyimg.com/seckillcms/s250x250_jfs/t20260319/109931/11/38074/25304/6418083eFe4de4ceb/1d82138ac6fb8f2d.jpg',
                    money:299,
					total:100,
					buy:0,
                }, 
                {
				id:4,
                    name:"AMLRO柔光射频美容仪Pro",
                    img:'https://img10.360buyimg.com/seckillcms/s250x250_jfs/t20260319/109931/11/38074/25304/6418083eFe4de4ceb/1d82138ac6fb8f2d.jpg',
                    money:199,
					total:100,
					buy:0,
                },
                 {
					 id:5,
                    name:"AMLRO柔光射频美容仪Pro",
                    img:'https://img10.360buyimg.com/seckillcms/s250x250_jfs/t20260319/109931/11/38074/25304/6418083eFe4de4ceb/1d82138ac6fb8f2d.jpg',
                    money:99,
					total:100,
					buy:0,
                },
            ],
       
          
        
        }
    },
    // #### 作业：在上一次基础上，加入监听器和计算属性，用计算属性来计算购买的总价，用监听器来控制购买的数量，如果超出了总数给出提示,不能再加数量了.
	methods: {
		
		 scdx(index){
            oj=this.object
          
				 if(oj[index].total>=0){
				sun=Number(oj[index].total)-Number(oj[index].buy)
                oj[index].total=sun
            if (oj[index].total<=0) {
                oj[index].total=0
            }
            if (oj[index].buy==0) {
                alert("库存不能为0")
            }
				 }else {
                    alert("输入错误",oj[index].buy=0)   
                 }
				
				
				this.goumai+= oj[index].buy*oj[index].money
				
				  oj[index].buy=0
				
				
			 },
			 zen(index){
				 oj=this.object
				 var sun
				sun=oj[index]
				 oj[oj.length]=sun
				console.log(index);
			 },
             shang(index){
                oj=this.object
				
				 var sun =oj[index]
                 console.log(oj[oj.length-1]);
				oj.splice(sun,1)
                
				// console.log(oj[0]);
				 	
				
				 
             },
			
			
			jian(index){
                oj=this.object
                if (oj[index].buy!=0) {
                       oj[index].buy-=1
                }
             
            },
            jia(index){
                oj=this.object
                       oj[index].buy+=1
                
            }
		
	},
	
});

app.mount("#app");
</script>
</html>